<template>
	<view class="page w-full bg-fffbf4 flex flex-col align-items-center">
		<view class="navBar w-full pl-30 pt-40 z-9999">
			<view class="title text-581403 f-40 text-bold flex justify-center align-items-center">
				{{ userStore.tenantInfo.homeTitle }}
			</view>
		</view>
		<view class="page-top-bg w-full h-750 z-0"></view>

		<!-- swiper -->
		<view class="w-690 mt-30">
			<!-- <wd-swiper :list="swiperList" autoplay height="220"></wd-swiper> -->
			<image :src="userStore.tenantInfo.homeImage" class="banner"></image>
		</view>

		<!-- grid -->
		<view class="w-690 radius-36 flex flex-wrap justif-between align-items-center">
			<view class="flex flex-col align-items-center mt-30" v-for="(item,index) in gridList" :key="index"
				@click="$toPage(item.url)">
				<image :src="item.img" class="w-120 h-120"></image>
				<text class="f-26 text-333 mt-3">{{ item.name }}</text>
			</view>
		</view>

		<!-- 资讯 -->
		<view class="w-690 mt-60">
			<view class="w-full flex justif-between align-items-center" @click="$toPage('/pages/activity-list/index')">
				<image src="@/static/bg-02.png" class="box-title"></image>
				<text class="text-581403 f-24">查看更多</text>
			</view>

			<view class="information-list p-40">
				<view class="text-581403 f-26 flex justif-between align-items-center" :class="[index > 0 ? 'mt-8':'']"
					v-for="(item,index) in informationList" :key="index" v-if="informationList.length"
					@click="$toPage(`/pages/activity-list/detail?id=${item.id}&type=info`)">
					<text class="ellipsis">{{ `${index + 1}.${item.title}` }}</text>
					<text class="flex-none ml-30 text-999 f-24">{{ dayjs(item.startTime).format("YYYY-MM-DD") }}
					</text>
				</view>
				<view class="h-full flex-center text-999" v-else>暂无数据~</view>
			</view>
		</view>

		<!-- 活动 -->
		<view class="w-690 mt-60 mb-40">
			<view class="w-full flex justif-between align-items-center">
				<image src="@/static/bg-04.png" class="box-title"></image>
				<!-- <text class="text-581403 f-24">查看更多</text> -->
			</view>

			<z-paging ref="paging" v-model="activityList" use-page-scroll @query="loadActivityList">
				<view class="w-full flex flex-wrap justif-between align-items-center">
					<image :src="item.coverImage" class="w-330 h-196 radius-24 " :class="[index > 1 ? 'mt-30':'']"
						v-for="(item,index) in activityList" :key="index"
						@click="$toPage(`/pages/activity-list/detail?id=${item.id}`)">
					</image>
				</view>
			</z-paging>

		</view>

	</view>
</template>

<script setup>
	import dayjs from "dayjs";
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { useUserStore } from "@/store/user";
	import icon01 from "@/static/icon-01.png";
	import icon02 from "@/static/icon-02.png";
	import icon03 from "@/static/icon-03.png";
	import icon04 from "@/static/icon-04.png";
	import icon05 from "@/static/icon-05.png";
	import icon06 from "@/static/icon-06.png";
	import icon07 from "@/static/icon-07.png";
	import icon08 from "@/static/icon-08.png";
	import icon09 from "@/static/icon-09.png";
	import icon10 from "@/static/icon-10.png";

	const { api_get_bulletinsPage, api_get_activityPage } = useRequest();
	const userStore = useUserStore()

	const paging = ref(null)
	useZPaging(paging)
	const gridList = ref([
		{ name: "宗祠志", img: icon01, url: "/pages/ancestral-hall-record/index" },
		{ name: "姓氏源流", img: icon02, url: "/pages/surname/index" },
		{ name: "家族族谱", img: icon03, url: "/pages/tree/search" },
		{ name: "历史文化", img: icon04, url: "/pages/history/index" },
		{ name: "当代风范", img: icon05, url: "/pages/person-of-fame/index" },
		{ name: "功德堂", img: icon06, url: "/pages/merits/index" },
		{ name: "牌位阁", img: icon07, url: "/pages/memorial-tablet/index" },
		{ name: "线上纪念", img: icon08, url: "/pages/memorialize/index" },
		{ name: "寻根服务", img: icon09, url: "/pages/root-list/index" },
		{ name: "宗亲机构", img: icon10, url: "/pages/kinsman/index" },
	]);

	// 资讯公告
	const informationList = ref([]);

	const loadInformationList = () => {
		let params = {
			page: 0,
			size: 3,
		};
		api_get_bulletinsPage(params).then((res) => {
			informationList.value = res.content;
		});
	};

	// 活动
	const activityList = ref([]);

	const loadActivityList = (pageNo, pageSize) => {
		let params = {
			page: pageNo - 1,
			size: pageSize,
		};
		api_get_activityPage(params).then(res => {
			paging.value.complete(res.content);
		}).catch(res => {
			paging.value.complete(false);
		})
	}


	onLoad((options) => {
		loadInformationList()
	});
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
	}

	.page-top-bg {
		position: fixed;
		top: 0;
		background-image: url('/src/static/bg-01.png');
		background-size: 100% 100%;
	}

	.box-title {
		width: 174rpx;
		height: 72rpx;
	}

	.information-list {
		width: 100%;
		height: 200rpx;
		background-image: url('/src/static/bg-03.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.banner {
		width: 690rpx;
		height: 344rpx;
	}
</style>